<template>
  <div class="bgc">
    <div class="title">
      <img src="@/assets/污水厂标题.png" alt="">
    </div>
    <div class="left">
      <div class="wuyu">
        <div class="two_title">
          <span>当前进出水量</span>
        </div>
        <div class="chart" style="padding-top: 5%;">
          <!-- <TuoLineChart :series="seriesCOD1" style="width: 100%; height: 95%;" /> -->
          <TuoLineChart style="width: 100%; height: 95%;" />
          
        </div>
      </div>
      <div class="baoyu">
        <div class="two_title">
          <span>降水与进水</span>
        </div>
        <div class="chart" style="padding-top: 5%;">
          <twoLineChart :series="seriesCOD2" style="width: 100%; height: 95%;" />
        </div>
      </div>
      <div class="zzz">
        <div class="two_title">
          <span>历史进出水量</span>
        </div>
        <div class="chart" style="padding-top: 5%;">
          <!-- <LineChart :series="seriesCOD3" style="width: 100%; height: 95%;" /> -->
          <lsLineChart style="width: 100%; height: 95%;" />
        </div>
      </div>
    </div>

    <div class="right">
      <div class="wuyu">
        <div class="two_title">
          <span>进水监测</span>
        </div>
        <div class="chart">
          <div class="button">
            <span :class="isWYCODFlag ? 'active' : ''" @click="fn1">COD</span>
            <span :class="isWYBODFlag ? 'active' : ''" @click="fn2">前池液位</span>
            <span :class="isWY氨氮Flag ? 'active' : ''" @click="fn3">氨氮</span>
          </div>
          <oneCODPointChart v-if="isWYCODFlag" style="width: 100%; height: 85%;" />
          <twoQCYWPointChart v-if="isWYBODFlag" style="width: 100%; height: 85%;" />
          <threeADPointChart v-if="isWY氨氮Flag" style="width: 100%; height: 85%;" />
        </div>
      </div>
      <div class="baoyu">
        <div class="two_title">
          <span>出水监测</span>
        </div>
        <div class="chart">
          <div class="button">
            <span :class="isBY总氮Flag ? 'active' : ''" @click="fn4">总氮</span>
            <span :class="isBY总磷Flag ? 'active' : ''" @click="fn5">总磷</span>
          </div>
          <fourTNPointChart v-if="isBY总氮Flag" style="width: 100%; height: 85%;" />
          <fiveTPPointChart v-if="isBY总磷Flag" style="width: 100%; height: 85%;" />
        </div>
      </div>
      <div class="zzz">
        <div class="two_title">
          <span>出水监测</span>
        </div>
        <div class="chart">
          <div class="button">
            <span :class="isCSCODFlag ? 'active' : ''" @click="fn6">COD</span>
            <span :class="isCS氨氮Flag ? 'active' : ''" @click="fn7">氨氮</span>
            <span :class="isCSPHFlag ? 'active' : ''" @click="fn8">PH</span>
          </div>
          <sixCODPointChart v-if="isCSCODFlag" :series="seriesCOD5" style="width: 100%; height: 85%;" />
          <sevenADPointChart v-if="isCS氨氮Flag" :series="seriesCOD5" style="width: 100%; height: 85%;" />
          <eightPHPointChart v-if="isCSPHFlag" :series="seriesCOD5" style="width: 100%; height: 85%;" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import PointChart from '../../components/charts/pointChart.vue'
import oneCODPointChart from '../../components/charts/oneCODPointChart.vue'
import twoQCYWPointChart from '../../components/charts/twoQCYWPointChart.vue'
import threeADPointChart from '../../components/charts/threeADPointChart.vue'
import fourTNPointChart from '../../components/charts/fourTNPointChart.vue'
import fiveTPPointChart from '../../components/charts/fiveTPPointChart.vue'
import sixCODPointChart from '../../components/charts/sixCODPointChart.vue'
import sevenADPointChart from '../../components/charts/sevenADPointChart.vue'
import eightPHPointChart from '../../components/charts/eightPHPointChart.vue'

import lsLineChart from '../../components/charts/lsLineChart.vue'
import twoLineChart from '../../components/charts/twoLineChart.vue'
import TuoLineChart from '../../components/charts/tuoLineChart.vue'



// let seriesCOD1: any = { series1: [0.8, 3.2, 3.3, 3, 2.9, 3.4, 1.2] }
let seriesCOD2: any = { series1: [4, 3.6, 3, 3, 3.2, 3.5, 3.6, 3.9], series2: [0.8, 0.8, 2.2, 2.7, 2.8, 2.2, 0.8] }
let seriesBOD4: any = { series1: [[2.9, 2.4], [3.1, 2.1], [2.9, 1.8], [3.1, 1.5], [2.9, 1.2], [3.1, 0.9], [2.9, 0.6], [3.1, 0.3]], series2: [[0.9, 3.6], [1.1, 3.3], [0.9, 3.0], [1.1, 2.7], [0.9, 2.4], [1.1, 2.1], [0.9, 1.8], [1.1, 1.5], [0.9, 1.2], [1.1, 0.9], [0.9, 0.6], [1.1, 0.3]] }
let series氨氮4: any = { series1: [[3.1, 2.7], [2.9, 2.4], [3.1, 2.1], [2.9, 1.8], [3.1, 1.5], [2.9, 1.2], [3.1, 0.9], [2.9, 0.6], [3.1, 0.3]], series2: [[0.9, 3.0], [1.1, 2.7], [0.9, 2.4], [1.1, 2.1], [0.9, 1.8], [1.1, 1.5], [0.9, 1.2], [1.1, 0.9], [0.9, 0.6], [1.1, 0.3]] }
let seriesCOD5: any = { series1: [[2.9, 3.0], [3.1, 2.7], [2.9, 2.4], [3.1, 2.1], [2.9, 1.8], [3.1, 1.5], [2.9, 1.2], [3.1, 0.9], [2.9, 0.6], [3.1, 0.3]], series2: [[0.9, 2.4], [1.1, 2.1], [0.9, 1.8], [1.1, 1.5], [0.9, 1.2], [1.1, 0.9], [0.9, 0.6], [1.1, 0.3]] }
let series总氮6: any = { series1: [[2.9, 3.6], [3.1, 3.3], [2.9, 3.0], [3.1, 2.7], [2.9, 2.4], [3.1, 2.1], [2.9, 1.8], [3.1, 1.5], [2.9, 1.2], [3.1, 0.9], [2.9, 0.6], [3.1, 0.3]], series2: [[1.1, 8.5], [0.9, 8.0], [1.1, 7.5], [0.9, 7.0], [1.1, 6.5], [0.9, 6.0], [1.1, 5.5], [0.9, 3.0], [1.1, 2.7], [0.9, 2.4], [1.1, 2.1], [0.9, 1.8], [1.1, 1.5], [0.9, 1.2], [1.1, 0.9], [0.9, 0.6], [1.1, 0.3]], series3: [[5.1, 3.8], [4.9, 3.6], [5.1, 3.3], [4.9, 3.0], [5.1, 2.7], [4.9, 2.4], [5.1, 2.1], [4.9, 1.8], [5.1, 1.5], [4.9, 1.2], [5.1, 0.9], [4.9, 0.6], [5.1, 0.3]] }
let series总磷6: any = { series1: [[2.9, 2.4], [3.1, 2.1], [2.9, 1.8], [3.1, 1.5], [2.9, 1.2], [3.1, 0.9], [2.9, 0.6], [3.1, 0.3]], series2: [[1.1, 8.5], [0.9, 8.0], [1.1, 7.5], [0.9, 7.0], [1.1, 6.5], [0.9, 6.0], [1.1, 5.5], [0.9, 3.0], [1.1, 2.7], [0.9, 2.4], [1.1, 2.1], [0.9, 1.8], [1.1, 1.5], [0.9, 1.2], [1.1, 0.9], [0.9, 0.6], [1.1, 0.3]], series3: [[4.9, 3.0], [5.1, 2.7], [4.9, 2.4], [5.1, 2.1], [4.9, 1.8], [5.1, 1.5], [4.9, 1.2], [5.1, 0.9], [4.9, 0.6], [5.1, 0.3]] }
let isWYCODFlag = ref(true)
let isWYBODFlag = ref(false)
let isWY氨氮Flag = ref(false)
let isBY总氮Flag = ref(true)
let isBY总磷Flag = ref(false)
let isCSCODFlag = ref(true)
let isCS氨氮Flag = ref(false)
let isCSPHFlag = ref(false)
const fn1 = () => {
  isWYCODFlag.value = true
  isWYBODFlag.value = false
  isWY氨氮Flag.value = false
}
const fn2 = () => {
  isWYCODFlag.value = false
  isWYBODFlag.value = true
  isWY氨氮Flag.value = false
}
const fn3 = () => {
  isWYCODFlag.value = false
  isWYBODFlag.value = false
  isWY氨氮Flag.value = true
}
const fn4 = () => {
  isBY总氮Flag.value = true
  isBY总磷Flag.value = false
}
const fn5 = () => {
  isBY总氮Flag.value = false
  isBY总磷Flag.value = true
}
const fn6 = () => {
  isCSCODFlag.value = true
  isCS氨氮Flag.value = false
  isCSPHFlag.value = false
}
const fn7 = () => {
  isCSCODFlag.value = false
  isCS氨氮Flag.value = true
  isCSPHFlag.value = false
}
const fn8 = () => {
  isCSCODFlag.value = false
  isCS氨氮Flag.value = false
  isCSPHFlag.value = true
}


  ; (window as any).ue4('move')
</script>


<style scoped>
.bgc {
  width: 100vw;
  height: 100vh;
  background-image: url('~@/assets/背景.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding-top: 1vh;
}

.title {
  height: 7.5vh;
  width: 100vw;
}

img {
  width: 100%;
  height: 100%;
}

.left {
  float: left;
  height: calc(100vh - 110px);
  /* background-color: pink; */
  margin-left: 10px;
}

.right {
  float: right;
  /* background-color: green; */
  margin-right: 10px;
}

.wuyu {
  height: calc((100vh - 150px) / 3 - 2vh);
  width: 18vw;
  margin-bottom: 2vh;
}

.baoyu {
  height: calc((100vh - 110px) / 3 - 2vh);
  width: 18vw;
  margin-bottom: 2vh;
}

.zzz {
  height: calc((100vh - 110px) / 3 - 2vh);
  width: 18vw;
  margin-bottom: 2vh;
}

.two_title {
  height: 3vh;
  margin-bottom: 1vh;
  /* background-color: pink; */
  background-image: url('~@/assets/title.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.two_title span {
  font-size: 1.5vh;
  color: #fff;
  line-height: 3vh;
  margin-left: 1.8vw;
}

.chart {
  /* background-color: cyan; */
  height: calc(100% - 4vh);
  background-image: url('~@/assets/污水厂图标背景.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.button {
  padding-top: 2%;
  margin-left: 40%;
}

.button span {
  margin-right: 5%;
  color: #fff;
  font-size: 0.8vh;
  cursor: pointer;
  /* background-color: blueviolet; */
  padding: 2px 5px;
}

.button span:hover {
  background-image: url('~@/assets/item-active.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.active {
  background-image: url('~@/assets/item-active.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
</style>